<div class="m-l nav navbar-nav m-t block" style="width:300px;" >  
  <span>群组管理 ></span>  
  <span>群组列表 </span>    
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
  <div class="panel panel-default">
    <div class="panel-body">
      <div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
        <div class="row">         
          <div class="col-md-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="关键字...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">查询</button>
                </span>
              </div>
          </div> 
          <div class="col-md-6" style="text-align: right">
            <button class="btn btn-info pull-right" (click)="btype=1; myModal.show()">
              新增
            </button>
          </div>      
        </div>
      </div>
      <div class="table-responsive">
      <table class="table table-hover table-striped">
        <thead>
          <tr>
            
              <th>群组编号</th> 
              <th>群组名称</th>             
              <th>群组地址</th>
              <th>关联设备数量</th> 
              <th>应用状态</th>
              <th>资费策略</th>  
              
              <th>操作</th>
              
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let groupdata of groupdata">            
              <td>{{groupdata.group_number}}</td>
              <td>{{groupdata.group_name}}</td>
              <td>{{groupdata.group_address}}</td>
              <td>{{groupdata.group_devices}}</td>
              <td>
                <span *ngIf="groupdata.group_status==0">未启用</span>
                <span *ngIf="groupdata.group_status==1">启用</span>
              </td>
              <td>
               <!-- {{groupdata.policy_id}} -->
                <span>--</span>
              </td>
             
                        
              <td>
                <button class="btn btn-xs btn-success" (click)="edit(groupdata)">编辑</button>              
                <button class="btn btn-xs btn-primary" (click)="showdevices(groupdata)">关联设备</button>              
                <button class="btn btn-xs btn-success" (click)="showstatus(groupdata)" *ngIf="groupdata.group_status==0">启用</button>
                 <button class="btn btn-xs btn-danger" (click)="showstatus(groupdata)" *ngIf="groupdata.group_status==1">禁用</button>
                <button class="btn btn-xs btn-info" (click)="showpolicy(groupdata)">资费策略</button>               
              </td>
          </tr>
        </tbody>
      </table>
      </div>
      <app-pagination [pageModel]="pageModel" (pageChanged)="getAll($event)"></app-pagination>
    </div>
  </div>
  </div>
</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" *ngIf="btype==1">新增</h4>
        <h4 class="modal-title" *ngIf="btype==2">编辑</h4>
        <h4 class="modal-title" *ngIf="btype==3">启用</h4>        
        <h4 class="modal-title" *ngIf="btype==5">关联设备</h4>
        <h4 class="modal-title" *ngIf="btype==4">资费策略</h4>
       <!--  <button class="close" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button> -->
      </div>
      <div class="modal-body">
        <form class="form-horizontal" *ngIf="btype==1||btype==2">
            <div class="form-group row" >             
              <label class="col-sm-3  control-label" style="text-align: right">群组名称</label>
              <div class="col-sm-7">
                <input type="text"  class="form-control" placeholder="请输入群组名称" name="group_name"  [(ngModel)]='group_name_new' *ngIf="btype==1">
                <input type="text"  class="form-control" placeholder="请输入群组名称" name="group_name"  [(ngModel)]='group_name_edit' *ngIf="btype==2">
              </div>
             
            </div> 
            <div class="form-group row" >             
              <label class="col-sm-3  control-label" style="text-align: right">群组地址</label>
              <div class="col-sm-7">
                <input type="text"  class="form-control" placeholder="请输入群组地址" name="group_addr"  [(ngModel)]='group_address_new' *ngIf="btype==1">
                <input type="text"  class="form-control" placeholder="请输入群组地址" name="group_addr"  [(ngModel)]='group_address_edit' *ngIf="btype==2">
              </div>             
            </div> 
        </form>
        <div *ngIf="btype==3">
          <div style="background-color: #e5e5e5;border:1px solid #e5e5e5;padding: 10px;font-size: 14px;border-radius: 5px;font-weight: bold;">
            你确定要启用该群组嘛？
          </div>
        </div>
        <div *ngIf="btype==4">
          <form class="form-horizontal">
              <div class="form-group row" >             
                <label class="col-sm-3  control-label" style="text-align: right">资费名称</label>
                <div class="col-sm-7">
                  <select class="form-control">
                    <option>sdasdd</option>
                    <option>mdfffg</option>
                  </select>
                </div>
              </div>
          </form>
        </div>
        <div *ngIf="btype==5">
          <form class="form-horizontal">
              <div class="form-group row" >             
                <label class="col-sm-3  control-label" style="text-align: right">设备IDs</label>
                <div class="col-sm-7">
                  <input type="text" name="dsfs" class="form-control" [(ngModel)]="deviceIds" placeholder="请输入设备id，多个设备请以逗号隔开">
                </div>
              </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-info confirm-btn" *ngIf="btype==1" (click)="savedata()">保存</button>
        <button class="btn btn-success confirm-btn" *ngIf="btype==2" (click)="saveedit()" >保存</button>
        <button class="btn btn-success confirm-btn" *ngIf="btype==3" (click)="groupstatus()">确定</button>
        <!-- <button class="btn btn-danger confirm-btn" *ngIf="btype==3" (click)="groupstatus(0)">确定</button> -->
        <button class="btn btn-info confirm-btn" *ngIf="btype==4" (click)="savepolicy()">确定</button>
        <button class="btn btn-primary confirm-btn" *ngIf="btype==5" (click)="savegroupdevices()">确定</button>
        <button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
      </div>
    </div>
     
    </div>
  </div>
</div>
